Integrate Google Pay (Android Pay) into React Native Mobile App
Say hello 👋🏻 to a good way to pay, by Google into React Native mobile App
What is Google Pay ?
Android Pay(Google Pay) have gained a lot of ground in the recent years and they’ve become the new standard for payments in mobile apps. If you notice native apps checkout experience in your apps, consider using them as your main method of payment. Otherwise, you’ll be missing on great opportunities.
Fast, simple checkout. Easy access to rewards and offers. One spot for purchases, passes, and payment methods. All of these are ways we’ve been working to make paying safer and easier for everyone, everywhere. And you can make the most of these features with the new Google Pay app for Android Mobile App
As more and more users love the simple process of paying with these methods, React Native developers are facing the challenge of integrating Android Pay into their mobile apps.
While adding Android Pay into a Java or Kotlin codebase is very well-documented and hence, straightforward, making use of Android Pay on a React Native app is quite difficult for now. Mainly because there’s no documentation and very few Javascript libraries (which, frankly, were quite buggy). Adding Apple Pay to React Native apps is in the same boat.
Until now React Native GPay represents a react native module which allows mobile developers to easily accept Android Pay in their react native apps. It takes advantage of the Payment Request protocol, which standardises the way merchants accept payments over the Internet.
I’ve tried the open-source library ourselves and we used it into one of my React Native Project. The documentation on the GitHub page is very comprehensive and it allows you to add payments to your app effortlessly. It describes exactly how to install the npm package and how to use it. It also lists all the differences between iOS and Android, so that you won’t go through the trouble of figuring them out by yourself.
In addition to purely accepting payments via credit cards, the React Native GPay project also has built-in support multi payment gateway Stripe or Braintree without add-ons, support for shipping addresses and shipping options, making the Javascript package ideal for mobile apps that deal with e-commerce, shipping, delivering, orders, etc
How to integrate Google Pay in React Native using react-native-gpay
Let’s create a React Native application from using CLI react-native-cli to show, follow step by step installed. If you want to integrate react-native-gpay for your existing app, skip Step 1.
Step 1: Install and set up React Native application
If you haven’t installed the React Native command line interface, run: npm install -g react-native-cli. Now you can create your project, simply using: react-native init ReactNativeGPay
Here are the dependency versions at the time of building this project:
- “react”: “16.6.3”
- “react-native”: “0.57.8”
- “react-native-gpay”: “^0.0.1” — we will install this one later.
Now you can try to run your app, react-native run-ios or react-native run-android . Usually, this works without any problems.
Step 2: Add and Link react-native-gpay package
Now let’s install react-native-map: npm install --save react-native-gpayafter installing the package you should link it to your native apps: react-native link react-native-gpay
Step 3: Set up Google Pay (Android)
It will be easier if we set them up separately by platform, so let’s first do it on Android. Before integrating GPay, we will check if GPay works correctly. Add the following step setup Google Pay to your mobile device.
Step 4 : Setting up GPay
Before you can start accepting payments in your App, you’ll need to setup Google Pay.
1. Add Google Play Services to your dependencies
2. Enable Android Pay in your ManifestSo, as you can see, by default Google APIs already added in your build gradle. More than that, if you linked everything correctly and enabled the user location, it’s actually done a lot of things for us (the user permission for the location with a default message). If you came from native Android development, then you probably know what is build gradle & AndroidManifest.xml file.
Step 5: Import Lib and configure in React Native Code
import an npm library and enabled in your app, jump into your app's entry point and make the PaymentRequest globally available to your app.
import GPay, { GooglePayImage } from 'react-native-gpay'once gPay is enable and configure as App Level then initialise and setup payment request method.
const paymentRequest = {
cardPaymentMethodMap: {
gateway: {
name: 'GATEWAY_NAME', // Identify your gateway and your app's
merchantId: '055XXXXXXXXXXXXX336', // YOUR_GATEWAY_MERCHANT_ID
clientKey: 'sandbox_XXXXXXXXXXXXndxm44jw',
sdkVersion: 'client.VERSION
},
cardNetworks
},
transaction: {
totalPrice: '50',
totalPriceStatus: 'FINAL', // PAYMENT AMOUNT STATUS
currencyCode: 'USD' // CURRENCY CODE
},
merchantName: 'XXXXXXXXXXXX' // MERCHANT NAME Information about the merchant requesting payment information
}To initialise a Payment Request, you’ll need to provide Payment Request details.
- The Payment Request is where you defined the forms of payment that you accept
- To enable GPay, we’ll define a payment gateway of android-pay.
- Setup & configuration merchant id, define the supported card types and the currency.
The cardPaymentMethodMap uses the following arguments:
- Gateway (required argument) — The number arguments are a set of one or more values, for which we wish to transaction gateway.
√ name : 'GATEWAY_NAME’, Identify your gateway and your app’s gateway merchant identifier.
√ merchantId: YOUR_GATEWAY_MERCHANT_ID
√ clientKey: OPTIONAL YOUR TOKENIZATION KEY. Need for BRAINTREE & STRIPE GATEWAY
√ sdkVersion: OPTIONAL YOUR Client.VERSION. Need for BRAINTREE & STRIPE GATEWAY
2. Card Networks (required argument) — The numbers of cards name are a set for enable accept card options.here is card networks details object of array supported in gPay.
const cardNetworks = ['AMEX', 'JCB', 'MASTERCARD', 'VISA']3.Transaction(required argument) — To specify currencies in request URI and body parameters, use three-character ISO-4217codes
transaction: {
totalPrice: '50',
totalPriceStatus: 'FINAL', // PAYMENT AMOUNT STATUS
currencyCode: 'USD' // CURRENCY CODE
}4. Merchant Name — MERCHANT NAME Information about the merchant requesting payment information
Check GPay Support App Device.
You can check it using below function for check GPay Support Your App and Devices?
onPressCheck = async () => {
const isAvailable = await GPay.checkGPayIsEnable(
GPay.ENVIRONMENT_TEST, // You can change environment here ENVIRONMENT_TEST,ENVIRONMENT_PRODUCTION
cardNetworks
).catch(error => {
console.warn(error.toString())
return false
})
this.setState({ isAvailable })
}Once you’ve defined your paymentrequest you’re ready to initialise your Payment Request.Now that you’ve setup your Payment Request Token, displaying it is as simple as calling the show method.
const paymentRequestToken = new GPay(GPay.ENVIRONMENT_TEST, paymentRequest);paymentRequestToken.show();
Transaction Payments Process
Now that we know how to initialise, display, and dismiss a Payment Request, let’s take a look at how to process payments. When a user accepts to pay, GPay.show will resolve to a Payment Response.
You can learn more about server-side decrypting of Payment Tokens on Google Payment Token Format Reference documentation.
Yes, now your app is running on platforms. Please check the react-native-gpay repo for more fun things that you can do with gPay. here is npm link for your references.
Conclusion
Hope my first article on Medium was helpful for you. Please, if you see any mistakes don’t hesitate to leave a comment, I will appreciate your comments!
